<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="会员昵称：">
                  <el-input v-model="userFrom.nickname" placeholder="请输入昵称" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="手机号：">
                  <el-input v-model="userFrom.phone" placeholder="请输入手机号" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="用户ID：">
                  <el-input v-model="userFrom.uid" placeholder="请输入用户ID" clearable class="selWidth" />
                </el-form-item>
              </el-col>
              <template v-if="collapse">
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item label="类型：">
                      <el-select v-model="userFrom.group_id" placeholder="请选择" class="selWidth" clearable filterable>
                        <el-option value="">全部</el-option>
                        <el-option v-for="(item, index) in groupList" :key="index" :value="item.group_id"
                          :label="item.group_name" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="渠道：">
                      <el-select v-model="userFrom.label_id" placeholder="请选择" class="selWidth" clearable filterable>
                        <el-option value="">全部</el-option>
                        <el-option v-for="(item, index) in labelLists" :key="index" :value="item.label_id"
                          :label="item.label_name" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>

              </template>
              <el-col v-if="collapse" :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item label="是否付费：">
                    <el-radio-group v-model="userFrom.is_svip" type="button" class="selWidth">
                      <el-radio-button label="">
                        <span>全部</span>
                      </el-radio-button>
                      <el-radio-button label="1">
                        <span>是</span>
                      </el-radio-button>
                      <el-radio-button label="0">
                        <span>否</span>
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" couponListclass="text-right userFrom">
                <el-form-item>
                  <el-button type="primary" icon="ios-search" label="default" class="mr15" size="small"
                    @click="userSearchs">搜索</el-button>
                  <el-button class="ResetSearch mr10" size="small" type="reset" @click="reset('userFrom')">重置</el-button>
                  <a class="ivu-ml-8" @click="collapse = !collapse">
                    <template v-if="!collapse">
                      展开 <i class="el-icon-arrow-down" />
                    </template>
                    <template v-else>
                      收起 <i class="el-icon-arrow-up" />
                    </template>
                  </a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row
        @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="首次访问：">
                <span>{{ props.row.create_time }}</span>
              </el-form-item>
              <el-form-item label="近次访问：">
                <span>{{ props.row.last_time }}</span>
              </el-form-item>
              <el-form-item label="身份证号：">
                <span>{{ props.row.card_id }}</span>
              </el-form-item>
              <el-form-item label="手机号：">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="真实姓名：">
                <span>{{ props.row.real_name }}</span>
              </el-form-item>
              <el-form-item label="标签：">
                <span v-for="(item, index) in props.row.label" :key="index" v-text="item" />
              </el-form-item>
              <el-form-item label="生日：">
                <span>{{ props.row.birthday }}</span>
              </el-form-item>
              <el-form-item label="地址：">
                <span>{{ props.row.addres }}</span>
              </el-form-item>
              <el-form-item label="备注：">
                <span>{{ props.row.mark }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- <el-table-column type="selection" width="55" /> -->

        <el-table-column width="50">
          <template slot="header" slot-scope="scope">
            <el-popover placement="top-start" width="100" trigger="hover" class="tabPop">
              <div>
                <span class="spBlock onHand" :class="{ 'check': chkName === 'dan' }"
                  @click="onHandle('dan', scope.$index)">选中本页</span>
                <span class="spBlock onHand" :class="{ 'check': chkName === 'duo' }" @click="onHandle('duo')">选中全部</span>
              </div>
              <el-checkbox slot="reference"
                :value="(chkName === 'dan' && checkedPage.indexOf(userFrom.page) > -1) || chkName === 'duo'"
                @change="changeType" />
            </el-popover>
          </template>
          <template slot-scope="scope">
            <el-checkbox :disabled="scope.row.cancel_time"
              :value="!scope.row.cancel_time && (checkedIds.indexOf(scope.row.uid) > -1 || (chkName === 'duo' && noChecked.indexOf(scope.row.uid) === -1))"
              @change="(v) => changeOne(v, scope.row)" />
          </template>
        </el-table-column>

        <el-table-column prop="uid" label="ID" min-width="60" />
        <el-table-column label="头像" min-width="50">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px" :src="scope.row.avatar ? scope.row.avatar : moren"
                :preview-src-list="[scope.row.avatar || moren]" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" min-width="150">
          <template slot-scope="{row}">
            <div class="acea-row">
              <i v-show="row.sex === 1" class="el-icon-male mr5"
                style="font-size: 15px; margin-top: 3px; color:#2db7f5;" />
              <i v-show="row.sex === 2" class="el-icon-female mr5"
                style="font-size: 15px; margin-top: 3px; color:#ed4014;" />
              <div v-text="row.nickname" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_svip" label="付费会员" min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.is_svip }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120" />
        <el-table-column label="等级" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.member_level }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.group_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="归属地" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.belong }}</span>
          </template>
        </el-table-column>
        <el-table-column label="渠道" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-link @click.native="onDetails(scope.row)" type="primary">统计</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="userFrom.limit" :current-page="userFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <el-dialog title="提示" :visible.sync="visible" width="1000px" :before-close="handleClose" class="dia">
      <news-category v-if="visible" :is-show-send="isShowSend" :wechat-ids="wechatIds" :user-ids="ids"
        :max-cols="maxCols" />
      <!--<span slot="footer" class="dialog-footer" />-->
    </el-dialog>
    <!--账户详情-->
    <el-dialog :title="`昵称：${activeName}，用户ID：${uid}`" :visible.sync="visibleDetail" width="1000px" :before-close="Close">
      <user-details v-if="visibleDetail" ref="userDetails" :uid="uid" @close="Close" />
    </el-dialog>
  </div>
</template>

<script>
import {
  teamLstApi,
  changeGroupApi,
  changelabelApi,
  changeNowMoneyApi,
  changeNowIntegralApi,
  batchChangeGroupApi,
  batchChangelabelApi,
  userUpdateApi,
  groupLstApi,
  labelLstApi,
  modifyUserReferrer,
  modifyUserPassword,
  changeMemberApi,
  createUserApi,
  giveMemberApi
} from '@/api/user'
import newsCategory from '@/components/newsCategory/index.vue'
import userDetails from './userDetails'
import {
  openKuais
} from '@/api/phone'

export default {
  name: 'UserList',
  components: {
    newsCategory,
    userDetails,
  },
  data() {
    return {
      moren: require("@/assets/images/f.png"),
      timeVal: [],
      collapse: false,
      visibleDetail: false,
      maxCols: 3,
      isShowSend: true,
      visible: false,
      user_type: '',
      tableData: {
        data: [],
        total: 0
      },
      listLoading: false,
      multipleSelection: [],
      ids: '',
      wechatIds: '',
      uid: '',
      labelPosition: 'right',
      userProps: {
        children: 'children',
        label: 'name',
        value: 'name'
      },
      userFrom: {
        label_id: '',
        user_type: '',
        nickname: '',
        phone: '',
        page: 1,
        limit: 20,
        group_id: '',
        uid: '',
        is_svip: ''
      },
      address: [],
      grid: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      grid2: {
        xl: 18,
        lg: 16,
        md: 12,
        sm: 24,
        xs: 24
      },
      grid3: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      addresData: [],
      groupList: [
        {
          "group_id": 10,
          "group_name": "省运营中心",
        },
        {
          "group_id": 11,
          "group_name": "市运营中心",
        },
        {
          "group_id": 12,
          "group_name": "区县运营中心",
        }
      ],
      labelLists: [
        {
          "label_id": 6,
          "label_name": "实体门店",
        },
        {
          "label_id": 4,
          "label_name": "残联帮扶创业渠道",
        },
        {
          "label_id": 3,
          "label_name": "网红主播渠道",
        },
        {
          "label_id": 2,
          "label_name": "创业者线下渠道",
        },
        {
          "label_id": 1,
          "label_name": "创业者线上渠道",
        }
      ],
      chkName: '',
      checkedIds: [], // 订单当前页选中的数据
      noChecked: [], // 订单全选状态下当前页不选中的数据
      checkedPage: [],
      visibleCoupon: false,
      couponForm: {
        用户标签: '',
        用户类型: '',
        性别: '',
        身份: '',
        消费情况: '',
        访问情况: '',
        访问时间: '',
        昵称: ''
      },
      allCheck: false,
      cancel_time: null,

      kStatus: true,
      activeName: ''
    }
  },
  mounted() {
    this.getList('')
  },
  methods: {
    // 用户
    onHandle(name) {
      this.chkName = this.chkName === name ? '' : name
      this.changeType(!(this.chkName === ''))
    },
    changeType(v) {
      if (v) {
        if (!this.chkName) {
          this.chkName = 'dan'
        }
      } else {
        this.chkName = ''
        this.allCheck = false;
      }
      const index = this.checkedPage.indexOf(this.userFrom.page)
      if (this.chkName === 'dan') {
        this.checkedPage.push(this.userFrom.page)
      } else if (index > -1) {
        this.checkedPage.splice(index, 1)
      }

      this.syncCheckedId()
    },
    syncCheckedId() {
      //   const ids = this.tableData.data.map(v => v.uid)
      const ids = this.tableData.data.map(v => {
        if (!v.cancel_time) {
          return v.uid
        }
      })
      if (this.chkName === 'duo') {
        this.checkedIds = []
        this.allCheck = true;
      } else if (this.chkName === 'dan') {
        this.allCheck = false;
        ids.forEach(id => {
          const index = this.checkedIds.indexOf(id)
          if (index === -1) {
            this.checkedIds.push(id)
          }
        })
      } else {
        ids.forEach(id => {
          const index = this.checkedIds.indexOf(id)
          if (index > -1) {
            this.checkedIds.splice(index, 1)
          }
        })
      }

    },
    // 分开选择
    changeOne(v, user) {
      if (v) {
        if (this.chkName === 'duo') {
          const index = this.noChecked.indexOf(user.uid)
          if (index > -1) this.noChecked.splice(index, 1)
        } else {
          const index = this.checkedIds.indexOf(user.uid)
          if (index === -1) this.checkedIds.push(user.uid)
        }
      } else {
        if (this.chkName === 'duo') {
          const index = this.noChecked.indexOf(user.uid)
          if (index === -1) this.noChecked.push(user.uid)
        } else {
          const index = this.checkedIds.indexOf(user.uid)
          if (index > -1) this.checkedIds.splice(index, 1)
        }
      }
      console.log("分开选择", this.checkedIds)

    },
    // 发送优惠券
    sendCoupon() {
      if (this.checkedIds.length == 0 && this.allCheck == false) {
        this.$message.warning('请选择用户')
      } else {
        this.visibleCoupon = true;
      }
    },
    sendSuccess() {
      this.visibleCoupon = false;
    },
    getCoupounParmas() {
      let label_id = this.userFrom.label_id == '' ? '' : this.getLabelValue(),
        user_type = this.findKey(this.userFrom.user_type, { '': '', '微信用户': 'wechat', '小程序用户': 'routine', 'H5用户': 'h5' }),
        sex = this.findKey(this.userFrom.sex, { '男': '1', '女': '2', '保密': '0', '': '' }),
        pay_count = this.findKey(this.userFrom.sex, { '0次': '-1', '1次以上': '0', '2次以上': '1', '3次以上': '2', '4次以上': '3', '5次以上': '4', '': '' }),
        is_svip = this.findKey(this.userFrom.is_svip, { '推广员': '1', '普通用户': '0', '': '' }),
        user_time_type = this.userFrom.user_time_type == 'visit' ? '最后访问' : this.userFrom.user_time_type == 'add_time' ? '首次访问' : ''
      this.couponForm = {
        用户标签: label_id,
        用户类型: user_type,
        性别: sex,
        消费情况: pay_count,
        身份: is_svip,
        访问情况: user_time_type,
        访问时间: this.userFrom.user_time,
        昵称: this.userFrom.nickname
      }
    },
    findKey(value, data, compare = (a, b) => a === b) {
      return Object.keys(data).find(k => compare(data[k], value))
    },
    getLabelValue() {
      let labelName = ''
      for (let i = 0; i < this.labelLists.length; i++) {
        if (this.labelLists[i]['label_id'] === this.userFrom.label_id) {
          labelName = this.labelLists[i]['label_name']
          return labelName
        }
      }
    },
    // 选择时间
    selectChange(tab) {
      this.timeVal = []
      this.userFrom.user_time = tab
      this.getList('')
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.userFrom.user_time = e ? this.timeVal.join('-') : ''
    },
    userSearchs() {
      if (this.userFrom.user_time_type && (!this.userFrom.user_time)) {
        this.$message.error('请选择访问时间')
      } else if (!this.userFrom.user_time_type && (this.userFrom.user_time)) {
        this.$message.error('请选择访问情况')
      } else {
        this.getList(1)
      }
    },
    // 创建用户
    createUser() {
      this.$modalForm(createUserApi()).then(() => this.getList(''))
    },
    // 账户详情
    onDetails(row) {
      this.uid = row.uid
      this.visibleDetail = true
      this.activeName = row.nickname
    },
    Close() {
      this.visibleDetail = false
    },
    sendNews() {
      if (this.checkedIds.length === 0 && this.allCheck == false) return this.$message.warning('请先选择用户')
      this.visible = true
      this.wechatIds = this.getWechatUsers(this.tableData.data, this.checkedIds)

    },
    handleClose() {
      this.visible = false
    },
    /**获取选中的微信用户Id */
    getWechatUsers(arr1, arr2) {
      let newArr = [];
      if (this.allCheck) {
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i]['wechat_user_id']) {
            newArr.push(arr1[i]['wechat_user_id']);
          }
        }
      } else {
        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            if (arr1[i]['uid'] === arr2[j] && arr1[i]['wechat_user_id']) {
              newArr.push(arr2[j]);
            }
          }
        }
      }
      return newArr;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      const data = []
      const wechatData = []
      this.multipleSelection.map((item) => {
        data.push(item.uid)
        wechatData.push(item.wechat_user_id)
      })
      this.ids = data.join(',')
      this.wechatIds = wechatData.join(',')
    },
    // 修改分组
    setGroup(row) {
      this.$modalForm(changeGroupApi(row.uid)).then(() => this.getList(''))
    },
    // 批量分组
    batchGroup() {
      if (this.checkedIds.length === 0) return this.$message.warning('请先选择用户')
      this.$modalForm(batchChangeGroupApi({
        ids: (this.checkedIds).join(",")
      }))
    },
    // 批量标签
    batchlabel() {
      if (this.checkedIds.length === 0) return this.$message.warning('请先选择用户')
      this.$modalForm(batchChangelabelApi({
        ids: (this.checkedIds).join(",")
      }))
    },
    // 修改标签
    setLabel(row) {
      this.$modalForm(changelabelApi(row.uid)).then(() => this.getList(''))
    },
    // 编辑会员等级
    setMember(row) {
      this.$modalForm(changeMemberApi(row.uid)).then(() => this.getList(''))
    },
    // 赠送付费会员
    giveMember(row) {
      this.$modalForm(giveMemberApi(row.uid)).then(() => this.getList(''))
    },

    // 开通快手直播
    openKuai(row) {
      let msg = `您确认要开通用户【${row.uid}】快手直播吗？`;

      this.$confirm(msg).then(res => {
        if (res == "confirm") {
          openKuais({
            uid: row.uid
          }).then(res => {
            this.$message.success(res.message)
          }).catch(res => {
            this.$message.error(res.message)
          })
        }
      }).catch(res => { })
    },
    // 修改推荐人
    setModify(row) {
      this.$modalForm(modifyUserReferrer(row.uid)).then(({ message }) => {
        this.$message.success(message)
        this.getList('');
      });
    },
    // 修改密码
    setPassword(row) {
      this.$modalForm(modifyUserPassword(row.uid)).then(() => this.getList(''));
    },
    // 修改余额
    setMoney(row) {
      this.$modalForm(changeNowMoneyApi(row.uid)).then(() => this.getList(''))
    },
    // 修改积分余额
    changeIntegral(row) {
      this.$modalForm(changeNowIntegralApi(row.uid)).then(() => this.getList(''))
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.userFrom.page = num ? num : this.userFrom.page;
      this.userFrom.user_type = this.user_type
      this.userFrom.province = this.address[0]
      this.userFrom.city = this.address[1]
      if (this.userFrom.user_type === '0') this.userFrom.user_type = ''
      teamLstApi(this.userFrom).then(res => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
        this.listLoading = false
        this.getCoupounParmas();

      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.userFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.userFrom.limit = val
      this.getList('')
    },
    // 编辑
    onEdit(id) {
      this.$modalForm(userUpdateApi(id)).then(() => this.getList(''))
    },
    // 重置
    reset() {
      this.userFrom = {
        label_id: '',
        user_type: '',
        nickname: '',
        phone: '',
        page: 1,
        limit: 20,
        group_id: '',
        uid: '',
        is_svip: ''
      }
      this.timeVal = []
    }
  }
}
</script>

<style lang="scss" scoped>
.check {
  color: #00a2d4;
}

.selWidth {
  // width: 100% !important;
}

.dia {
  /deep/ .el-dialog__body {
    height: 700px !important;
  }
}

.text-right {
  text-align: right;
}

.container {
  min-width: 821px;

  /deep/.el-form-item {
    width: 100%;
  }

  /deep/.el-form-item__content {
    width: 72%;
  }
}

.vipName {
  color: #dab176
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 12px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}

/deep/[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: none !important;
}
</style>
